<template>
	<div class="mainbody" v-resize="handleResize">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="el-icon-s-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>首页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-box">
			<el-row :gutter="20">
				<el-col :span="16" :xs="24">
					<el-row :gutter="20">
						<el-col :xs="24" :md="10">
							<!--统计信息-->
							<el-row :gutter="20" class="count-box">
								<el-col :span="12">
									<el-card class="item-bg">
										<h1>{{siteCount}}<span>个</span></h1>
										<p>站点数量</p>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card>
										<h1>{{memberCount}}<span>位</span></h1>
										<p>会员数量</p>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card>
										<h1>{{rechargeCount}}<span>条</span></h1>
										<p>今日充值</p>
									</el-card>
								</el-col>
								<el-col :span="12">
									<el-card class="item-bg">
										<h1>{{rechargeAmount}}<span>元</span></h1>
										<p>今日收入</p>
									</el-card>
								</el-col>
							</el-row>
							<!--/统计信息-->
						</el-col>
						<el-col :xs="24" :md="14" class="mab-20">
							<!--待办事件-->
							<el-card>
								<div slot="header" class="clearfix">
									<i class="el-icon-date"></i>
									<span>待办事件</span>
								</div>
								<div class="ibtn-box">
									<el-row :gutter="20">
										<el-col :span="12">
											<el-badge :value="memberReview">
												<a @click="$common.linkUrl('/member/audit')">
													<i class="el-icon-user"></i>
													<span>待审会员</span>
												</a>
											</el-badge>
										</el-col>
										<el-col :span="12">
											<el-badge :value="articleCount">
												<a>
													<i class="el-icon-document-checked"></i>
													<span>待审文章</span>
												</a>
											</el-badge>
										</el-col>
										<el-col :span="12">
											<el-badge :value="contributeCount">
												<a>
													<i class="el-icon-chat-dot-round"></i>
													<span>待审搞件</span>
												</a>
											</el-badge>
										</el-col>
										<el-col :span="12">
											<el-badge :value="paymentCount">
												<a @click="$common.linkUrl('/member/recharge/list')">
													<i class="el-icon-bank-card"></i>
													<span>待支付充值</span>
												</a>
											</el-badge>
										</el-col>
									</el-row>
								</div>
							</el-card>
							<!--/待办事件-->
						</el-col>
						<el-col :span="24" class="mab-20">
							<el-card>
								<div id="userChart" ref="userChart" style="height:259px;"></div>
							</el-card>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="8" :xs="24">
					<el-row>
						<el-col :span="24" class="mab-20">
							<el-card>
								<div slot="header" class="clearfix">
									<i class="el-icon-monitor"></i>
									<span>系统信息</span>
								</div>
								<div class="cinfo-box">
									<el-timeline>
										<el-timeline-item color="#0bbd87" :timestamp="user.lastIp">本次登录IP</el-timeline-item>
										<el-timeline-item :timestamp="user.lastTime">本次登录时间</el-timeline-item>
										<el-timeline-item :timestamp="user.addTime">账户注册时间</el-timeline-item>
									</el-timeline>
									<el-divider></el-divider>
									<div class="dl-box clearfix">
										<dl>
											<dt>主站名称</dt>
											<dd>{{config.webName}}</dd>
										</dl>
										<dl>
											<dt>主站域名</dt>
											<dd>{{config.webUrl}}</dd>
										</dl>
										<dl>
											<dt>公司名称</dt>
											<dd>{{config.webCompany}}</dd>
										</dl>
										<dl>
											<dt>当前版本</dt>
											<dd>{{config.webVersion}}</dd>
										</dl>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	export default {
		props: {
			config: {
				type: Object,
				default: {}
			},
			user: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				siteCount: 0,
				articleCount: 0,
				contributeCount: 0,
				memberCount: 0,
				memberReview: 0,
				memberList: [],
				rechargeCount: 0,
				rechargeAmount: 0,
				paymentCount: 0,
				echartList: []
			}
		},
		methods: {
			//初始化会员图表
			initMemberChart() {
				let userData = {
					title: [],
					data: [],
				}
				this.memberList.map(item => {
					userData.title.push(item.title);
					userData.data.push(item.total);
				});
				//基于准备好的dom，初始化echarts实例
				let userChart = echarts.init(this.$refs.userChart);
				this.echartList.push(userChart);
				//绘制图表
				userChart.setOption({
					color: ['#3398DB'],
					title: { text: '会员注册情况', subtext: '默认显示当月统计数据', textStyle: { fontSize: 16, fontWeight: "normal" } },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
						},
					},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '5%',
						width: 'auto',
						height: 'auto',
						containLabel: true,
					},
					xAxis: {
						data: userData.title,
						axisTick: {
							alignWithLabel: true,
						},
					},
					yAxis: {
						type: 'value',
					},
					series: [{
						name: '新增用户',
						type: 'bar',
						data: userData.data,
					}],
				});
			},
			//页面发生改变回调
			handleResize () {
				this.echartList.forEach((chart) => {
					chart.resize();
				});
			},
		},
		mounted() {
			let _this = this;
			//获取站点数量
			_this.$api.request({
				url: '/admin/site/view/count',
				success(res) {
					_this.siteCount = res.data;
				}
			});
			//获取待审文章数量
			_this.$api.request({
				url: '/admin/article/view/count?status=1',
				success(res) {
					_this.articleCount = res.data;
				}
			});
			//获取新增会员总数
			_this.$api.request({
				url: '/admin/member/view/count?status=0',
				success(res) {
					_this.memberCount = res.data;
				}
			});
			//获取待审会员总数
			_this.$api.request({
				url: '/admin/member/view/count?status=2',
				success(res) {
					_this.memberReview = res.data;
				}
			});
			//获取会员统计列表
			_this.$api.request({
				url: '/admin/member/view/report',
				success(res) {
					_this.memberList = res.data;
					if(_this.$refs.userChart){
						_this.$nextTick(() => {
							_this.initMemberChart();
						});
					}
					
				},
			});
			//今日充值数量
			let day = new Date();
			_this.$api.request({
				url: '/admin/member/recharge/view/count?status=1&startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
				success(res) {
					_this.rechargeCount = res.data;
				}
			});
			//今日充值金额
			_this.$api.request({
				url: '/admin/member/recharge/view/amount?status=1&startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
				success(res) {
					_this.rechargeAmount = res.data;
				}
			});
			//待支付充值数量
			_this.$api.request({
				url: '/admin/member/recharge/view/count?status=0',
				success(res) {
					_this.paymentCount = res.data;
				}
			});
			//待审稿件数量
			_this.$api.request({
				url: '/admin/article/contribute/view/count?status=0',
				success(res) {
					_this.contributeCount = res.data;
				}
			});
		},
		//使用局部注册指令的方式
		directives: {
			resize: { // 指令的名称
				bind (el, binding) { //el为绑定的元素，binding为绑定给指令的对象
					let width = '', height = '';
					function isReize () {
						const style = document.defaultView.getComputedStyle(el);
						if (width !== style.width || height !== style.height) {
							binding.value();  //关键
						}
						width = style.width;
						height = style.height;
					}
					el.__vueSetInterval__ = setInterval(isReize, 300);
				},
				unbind (el) {
					clearInterval(el.__vueSetInterval__);
				}
			},
		},
	}
</script>

<style lang="scss">
	.count-box {
		.el-col {
			margin-bottom: 20px;
		}
		.el-card__body {
			h1 {
				padding: 13px 0;
				text-align: center;
				color: #303133;
				font-size: 24px;
				font-weight: normal;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				span {
					margin-left: 5px;
					color: #999;
					font-size: 12px;
				}
			}
			p {
				padding-bottom: 10px;
				text-align: center;
				color: #d6d3e6;
				font-size: 12px;
			}
		}
		.item-bg {
			.el-card__body {
				background: #409eff;
				h1 {
					color: #fff;
					span {
						color: #fff;
					}
				}
			}
		}
	} 
	.ibtn-box {
		margin-top: -20px;
		.el-col {
			margin-top: 20px;
		}
		.el-badge {
			width: 100%;
			a {
				display: block;
				padding: 10px;
				text-decoration: none;
				border-radius: 4px;
				text-align: center;
				background: #E6A23C;
				cursor: pointer;
				-webkit-transition-duration: 0.4s;
				transition-duration: 0.4s;
				&:hover {
					background: #409eff;
					
				}
				i {
					color: #fff;
					font-size: 28px;
				}
				span {
					display: block;
					margin-top: 5px;
					color: #fff;
					font-size: 12px;
					line-height: 20px;
				}
			}
		}
	}
	.cinfo-box {
		.el-divider {
			margin: 0 0 20px 0;
		}
		.dl-box {
			dl {
				clear: both;
				padding: 4px 0;
				height: 24px;
				line-height: 24px;
				font-size: 13px;
				dt {
					display: block;
					float: left;
					width: 60px;
				}
				dd {
					margin-left: 70px;
					color: #909399;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	.store-box {
		dl {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			padding: 5px 0;
			height: 26px;
			line-height: 26px;
			color: #606266;
			dt {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				.number {
					flex-shrink: 0;
					display: block;
					margin-right: 5px;
					color: #fff;
					font-size: 12px;
					font-weight: 600;
					border-radius: 2px;
					background: #E6A23C;
					width: 20px;
					height: 20px;
					line-height: 20px;
					text-align: center;
				}
				.title {
					flex-grow: 1;
					color: #909399;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			dd {
				flex-shrink: 0;
				margin-left: 5px;
				.count {
					color: #888;
					font-weight: 600;
					white-space: nowrap;
				}
			}
		}
	}
</style>